<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{activityName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{activityDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreActivity">更多</span>
    </div>
    <div @click="clickActivity(item.id)" class="c-mt30 box-show c-br-br10 c-br-bl10" :key="index" v-for="(item,index) in itemList">
      <div class="c-w100 c-maxh296 c-text-hidden c-p">
        <img class="c-w100 c-hh296 imgCloseBig c-br-tr10 c-br-tl10" :src="$addXossFilter(item.avatar, require('@/assets/activity_defult.png'))" />
      </div>
      <div class="c-fs24 c-text-ellipsis2 c-lh36 c-ph20 c-pt20">{{item.name}}</div>
      <div class="c-flex-row c-justify-sb c-aligni-center c-pt12 c-fs18 c-fc-gray c-ph20 c-pb24">
        <div>{{getTime(item.startAt)}} </div>
        <div v-if="item.isShowEnroll !=-1">{{item.enrollCount}}人已报名</div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{activityName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{activityDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreActivity">查看更多</span>
    </div>
    <div class="c-pb30">
      <div v-for="(item,index) in itemList" :key="index" class="c-mt30 box-show c-br-br10 c-br-bl10" @click="clickActivity(item.id)">
        <div class="c-w100 c-maxh296 c-text-hidden c-p">
          <img class="c-w100 c-hh296 imgCloseBig c-br-tr10 c-br-tl10" :src="$addXossFilter(item.avatar, require('@/assets/activity_defult.png'))" />
        </div>
        <div class="c-fs24 c-text-ellipsis2 c-lh36 c-ph20 c-pt20">{{item.name}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-pt12 c-fs18 c-fc-gray c-ph20 c-pb24">
          <div>{{getTime(item.startAt)}} </div>
          <div v-if="item.isShowEnroll !=-1">{{item.enrollCount}}人已报名</div>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="activityName" :titleDesc="activityDesc" @clickMore="clickMoreActivity"></index-three-title-com>
    <div class="c-ph24 c-pb40 c-bd-b12-f5">
      <div @click="clickActivity(item.id)" class="c-mt30 box-show c-br-br10 c-br-bl10" :key="index" v-for="(item,index) in itemList">
        <div class="c-w100 c-maxh296 c-text-hidden c-p">
          <img class="c-w100 c-hh296 imgCloseBig c-br-tr10 c-br-tl10" :src="$addXossFilter(item.avatar, require('@/assets/activity_defult.png'))" />
        </div>
        <div class="c-fs24 c-text-ellipsis2 c-lh36 c-ph20 c-pt20">{{item.name}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-pt12 c-fs18 c-fc-gray c-ph20 c-pb24">
          <div>{{getTime(item.startAt)}} </div>
          <div v-if="item.isShowEnroll !=-1">{{item.enrollCount}}人已报名</div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pt24 c-pb24 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{activityName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{activityDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreActivity">更多</span>
    </div>
    <div @click="clickActivity(item.id)" class="c-mt24 box-show c-br-br10 c-br-bl10" :key="index" v-for="(item,index) in itemList">
      <div class="c-w100 c-maxh296 c-text-hidden c-p">
        <img class="c-w100 c-hh296 imgCloseBig c-br-tr10 c-br-tl10" :src="$addXossFilter(item.avatar, require('@/assets/activity_defult.png'))" />
      </div>
      <div class="c-fs24 c-text-ellipsis2 c-lh36 c-ph20 c-pt20">{{item.name}}</div>
      <div class="c-flex-row c-justify-sb c-aligni-center c-pt12 c-fs18 c-fc-gray c-ph20 c-pb24">
        <div>{{getTime(item.startAt)}} </div>
        <div v-if="item.isShowEnroll !=-1">{{item.enrollCount}}人已报名</div>
      </div>
    </div>
  </div>

  <div class="c-w100" v-else-if="(themeName == 'mb7' && isFromM7) || isMicroPage">
    <div class="c-flex-row c-pt24" v-for="(item,index) in itemList" :key="index" @click="clickActivity(item.activityId)" v-if="itemType == 1 && index <showCount">
      <div class="c-pb24">
        <div class="c-ww240 c-max240 c-text-hidden c-p c-br16 c-flex-shrink0">
          <img class="c-w100 c-br16 c-block" :src="$addXossFilter(item.poster, require('@/assets/activity_defult.png'))" @error="item.poster = require('@/assets/activity_defult.png')" alt="" />
        </div>
      </div>
      <div class="c-flex-column c-justify-sb c-ml20 c-flex-grow1 c-w0 c-pb24" :class="index == itemList.length-1 ? '' : 'c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <div class="c-fs18 c-fc-gray" v-if="item.startAt&&visible.statusVisible">{{getTime(item.startAt)}}</div>
          <span class="c-fs18 c-fc-gray c-lh" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{item.enrollCount}}人已报名</span>
        </div>
      </div>
    </div>

    <div class="c-w100" v-if="itemType == 2">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <div class="c-flex-column c-ww284 c-pv24" v-for="(item,index) in itemList" v-if="index <showCount" :key="index" @click="clickActivity(item.activityId)">
          <div class="c-ww284 c-maxh284 c-br16 c-text-hidden">
            <img class="c-w100 c-maxh284 c-br16" :src="$addXossFilter(item.poster, require('@/assets/activity_defult.png'))" @error="item.poster = require('@/assets/activity_defult.png')" alt="" />
          </div>
          <div class="c-fs24 c-text-ellipsis2 c-lh36 c-flex-row c-aligni-center c-mt16 c-ph10">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10">
            <div class="c-fs18 c-fc-gray" v-if="item.startAt&&visible.statusVisible">{{getTime(item.startAt)}}</div>
            <span class="c-fs18 c-fc-gray c-lh" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{item.enrollCount}}人已报名</span>
          </div>
        </div>
      </div>
    </div>
    <div class="c-w100" v-if="itemType == 4">
      <div class="c-flex-column c-w100 c-pv20" v-for="(item,index) in itemList" v-if="index <showCount" :key="index" @click="clickActivity(item.activityId)">
        <div class="c-w100 c-maxh592 c-br16 c-text-hidden">
          <img class="c-w100 c-br16" :src="$addXossFilter(item.poster, require('@/assets/activity_defult.png'))" @error="item.poster = require('@/assets/activity_defult.png')" alt="" />
        </div>
        <div class="c-fs24 c-text-ellipsis2 c-lh36 c-flex-row c-aligni-center c-mt16 c-ph10">{{item.name}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10">
          <div class="c-fs18 c-fc-gray" v-if="item.startAt&&visible.statusVisible">{{getTime(item.startAt)}}</div>
          <span class="c-fs18 c-fc-gray c-lh" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{item.enrollCount}}人已报名</span>
        </div>
      </div>
    </div>
    <div class="c-w100" v-if="itemType == 5">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pv20">
        <div class="c-inlineblack c-vcAlign-top c-ww260 c-mr20 c-bd1 c-br16 c-text-hidden c-pb16" v-for="(item,index) in itemList" v-if="index <showCount" :key="index" @click="clickActivity(item.activityId)">
          <div class="c-w100">
            <img class="c-w100" :src="$addXossFilter(item.poster, require('@/assets/activity_defult.png'))" @error="item.poster = require('@/assets/activity_defult.png')" alt="" />
          </div>
          <div class="c-fs24 c-text-ellipsis2 c-lh36 c-ws-bs c-mt16 c-ph10">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10">
            <div class="c-fs18 c-fc-gray" v-if="item.startAt&&visible.statusVisible">{{getTime(item.startAt)}}</div>
            <span class="c-fs18 c-fc-gray c-lh" v-if="item.isShowEnroll != -1&&visible.dataVisible">{{item.enrollCount}}人已报名</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="itemList.length >= 7 && showMore != 1" class="c-fs20 c-fc-sblack c-textAlign-c c-pv16" @click="clickMore">查看更多 <span class="icon iconfont">&#xe836;</span></div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
export default {
  name: "ActivityItem",
  components: {
    indexThreeTitleCom
  },
  props: {
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    activityName: {
      type: String,
      default: '活动',
    },
    activityDesc: {
      type: String,
      default: '活动',
    },
    itemList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    getTime(startAt) {
      let compareTime = new Date().getTime() - new Date(startAt.replace(/-/g, "/")).getTime();
      let monthDay = startAt && startAt.length > 0 ? startAt.slice(5) : '';
      return compareTime > 0 ? '进行中' : monthDay + "开始";
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickMoreActivity() {
      let toPath = `/activity/activityIndex`;
      this.iosAppRouteChange(toPath);
    },
    clickActivity(activityId) {
      let toPath = `/activity/activityDetail?ActivityNo=${activityId}&from=activity`;
      this.iosAppRouteChange(toPath);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
.box-show {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}
</style>
